<script setup lang="ts">
import { translate } from '@/service/translate'

const translateStore = useTranslate()

const sortMethod = ref<null | Record<string, string>>(null)

const getLanguageList = () => {
  translate.getLanguage().then(({ data }: any) => {
    sortMethod.value = data
    translateStore.fromLanguage = translateStore.fromLanguage || Object.values(data)[0] as string
    translateStore.toLanguage = translateStore.toLanguage || Object.values(data)[1] as string
  })
}

getLanguageList()

</script>
<template>
  <div>
    <div class="flex items-center">
      <div class="flex items-center bg-white rounded-lg p-2 px-4 border mr-3">
        <div class="font-bold mr-2 text-sm whitespace-nowrap">
          当前语言
        </div>
        <div class="max-w-[180px] h-[42px] flex-1">
          <el-select v-model="translateStore.fromLanguage" class="w-full h-full">
            <el-option v-for="(value, key) in sortMethod" :key="value" :label="key" :value="value" />
          </el-select>
        </div>
      </div>
      <div class="flex items-center bg-white rounded-lg p-2 px-4 border">
        <div class="font-bold mr-2 text-sm whitespace-nowrap">
          目标语言
        </div>
        <div class="max-w-[180px] h-[42px] flex-1">
          <el-select v-model="translateStore.toLanguage" class="w-full h-full">
            <el-option v-for="(value, key) in sortMethod" :key="value" :label="key" :value="value" />
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex items-center">
      <div class="flex items-center bg-white rounded-lg p-2 px-4 border mt-3 w-full md:w-[568px]">
        <div class="font-bold mr-2 text-sm whitespace-nowrap">
          令牌
        </div>
        <div class="h-[42px] flex-1">
          <el-input v-model:model-value="translateStore.apiKey" maxlength="2000" class="w-full h-full" />
        </div>
        <a class="pl-2 text-red-600" href="https://perkai.pushplus.plus/token" target="_blank">没有令牌？点击获取</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.select-trigger), :deep(.select-trigger .el-input) {
  --el-select-input-focus-border-color: #F0F0F0;
  @apply w-full h-full;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  @apply  rounded-lg overflow-hidden bg-[#F0F0F0] shadow-none hover:bg-[#EBEBEB] font-bold;
}
</style>
